import classnames from 'classnames'

import Icon from '@/components/Icon'
import Img from '@/components/Img'

import styles from './index.module.scss'
import { Article } from '@/types/data'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { useHistory } from 'react-router'
moment.locale('zh-cn')

type Props = {
  /**
   * 0 表示无图
   * 1 表示单图
   * 3 表示三图
   */
  // type?: 0 | 1 | 3
  article: Article
}

const ArticleItem = ({
  article: {
    cover: { type, images },
    title,
    aut_name,
    comm_count = 0,
    pubdate,
    art_id,
  },
}: Props) => {
  const history = useHistory()
  return (
    <div
      className={styles.root}
      onClick={() => history.push(`/article/${art_id}`)}
    >
      <div
        className={classnames(
          'article-content',
          type === 3 && 't3',
          type === 0 && 'none-mt'
        )}
      >
        <h3>{title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images.map((item: string, index: number) => {
              return (
                <div className="article-img-wrapper" key={index}>
                  <Img src={item} />
                </div>
              )
            })}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 && 'none-mt')}>
        <span>{aut_name}</span>
        <span>{comm_count} 评论</span>
        <span>{moment(pubdate).fromNow()} 前</span>
        <span className="close">
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  )
}

export default ArticleItem
